<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CodePen - Fluid tab active state</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background: #1A1E23;
            font-family: "Lato", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        nav {
            position: relative;
            padding-bottom: 12px;
        }

        nav .line {
            height: 2px;
            position: absolute;
            bottom: 0;
            margin: 10px 0 0 0;
            background: #FF1847;
        }

        nav ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
        }

        nav ul li {
            margin: 0 40px 0 0;
            opacity: 0.4;
            transition: all 0.4s ease;
        }

        nav ul li:hover {
            opacity: 0.7;
        }

        nav ul li.active {
            opacity: 1;
        }

        nav ul li:last-child {
            margin-right: 0;
        }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            text-transform: uppercase;
            display: block;
            font-weight: 600;
            letter-spacing: 0.2em;
            font-size: 14px;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
    </style>

    <script>
        window.console = window.console || function (t) { };
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no">
    <a href="https://codepen.io/aaroniker/pen/pezemX" style="position: absolute; top: 0; font-size: 20px;">连接</a>

    <nav>
        <ul>
            <li class="active"><a href="">First</a></li>
            <li><a href="">Second</a></li>
            <li><a href="">Third</a></li>
        </ul>
    </nav>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script id="rendered-js">
        var nav = $('nav');
        var line = $('<div />').addClass('line');

        line.appendTo(nav);

        var active = nav.find('.active');
        var pos = 0;
        var wid = 0;

        if (active.length) {
            pos = active.position().left;
            wid = active.width();
            line.css({
                left: pos,
                width: wid
            });

        }

        nav.find('ul li a').click(function (e) {
            e.preventDefault();
            if (!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {

                nav.addClass('animate');

                var _this = $(this);

                nav.find('ul li').removeClass('active');

                var position = _this.parent().position();
                var width = _this.parent().width();

                if (position.left >= pos) {
                    line.animate({
                        width: position.left - pos + width
                    },
                        300, function () {
                            line.animate({
                                width: width,
                                left: position.left
                            },
                                150, function () {
                                    nav.removeClass('animate');
                                });
                            _this.parent().addClass('active');
                        });
                } else {
                    line.animate({
                        left: position.left,
                        width: pos - position.left + wid
                    },
                        300, function () {
                            line.animate({
                                width: width
                            },
                                150, function () {
                                    nav.removeClass('animate');
                                });
                            _this.parent().addClass('active');
                        });
                }

                pos = position.left;
                wid = width;
            }
        });
    </script>

</body>

</html>